<template>
  <div>
    <div class="flexcontent">
      <div>
        <div class="title">{{year}}年第{{jidu}}季度：{{quarterTime}}</div>
        <div class="source">
          <div class="sorcont">价值观考核得分：<span>{{parseInt(formdata.valueConceptTotalScore)===0?"-":formdata.valueConceptTotalScore}}</span></div>
          <div class="sorcont">管家服务考核得分：<span>{{parseInt(formdata.assistEvaluationScore)===0?"-":formdata.assistEvaluationScore}}</span></div>
        </div>
        <div class="source">
          <div class="sorcont">价值观考核结果等级：
            <span>{{ formdata.valueConceptGrade === 1 ? '优秀' : '' }}</span>
            <span>{{ formdata.valueConceptGrade === 2 ? '良好' : '' }}</span>
            <span>{{ formdata.valueConceptGrade === 3 ? '待提升' : '' }}</span>
            <span>{{ formdata.valueConceptGrade === 0 ? '-' : '' }}</span></div>
          <div class="sorcont">管家考核结果等级：
            <span>{{ formdata.assistEvaluationGrade === 1 ? '优秀' : '' }}</span>
            <span>{{ formdata.assistEvaluationGrade === 2 ? '良好' : '' }}</span>
            <span>{{ formdata.assistEvaluationGrade === 3 ? '待提升' : '' }}</span>
            <span>{{ formdata.assistEvaluationGrade === 0 ? '-' : '' }}</span></div>
        </div>
      </div>
      <div class="btnback"><el-button type="primary" @click="back()">返回</el-button></div>
    </div>

    <el-tabs v-model="activeName" @tab-click="handleClick" style="margin: 20px">
      <el-tab-pane label="运营评价结果" name="first">
        <div v-if="parseInt(formdata.staffMemberEvaluationScore)!=0">
          <div class="sorcont">运营评价总得分：  <span>{{yun.totalScore}}分</span></div>
          <div class="sorcont">用户至上：  <span>{{yun.firstValueScore}}分</span></div>
          <div v-if="yun.firstValueDescribe">
            <div class="exampletitle">评分举例说明</div>
            <div class="examplecontent">{{yun.firstValueDescribe}}</div>
          </div>
          <div class="imglist" v-if="yun.firstValueImg">
            <img v-for="item in yun.firstValueImg" :src="item" alt="" @click="setbig(item)">
          </div>
          <div class="sorcont">正直坦诚：  <span>{{yun.secondValueScore}}分</span></div>
          <div v-if="yun.secondValueDescribe">
            <div class="exampletitle">评分举例说明</div>
            <div class="examplecontent">{{yun.secondValueDescribe}}</div>
          </div>
          <div class="imglist" v-if="yun.secondValueImg">
            <img v-for="item in yun.secondValueImg" :src="item" alt="" @click="setbig(item)">
          </div>
          <div class="sorcont">极致执行：  <span>{{yun.thirdValueScore}}分</span></div>
          <div v-if="yun.thirdValueDescribe">
            <div class="exampletitle">评分举例说明</div>
            <div class="examplecontent">{{yun.thirdValueDescribe}}</div>
          </div>
          <div class="imglist" v-if="yun.thirdValueImg">
            <img v-for="item in yun.thirdValueImg" :src="item" alt="" @click="setbig(item)">
          </div>
          <div class="sorcont">精进创新：  <span>{{yun.fourthValueScore}}分</span></div>
          <div v-if="yun.fourthValueDescribe">
            <div class="exampletitle">评分举例说明</div>
            <div class="examplecontent">{{yun.fourthValueDescribe}}</div>
          </div>
          <div class="imglist" v-if="yun.fourthValueImg">
            <img v-for="item in yun.fourthValueImg" :src="item" alt="" @click="setbig(item)">
          </div>
          <div class="sorcont">团结共赢：  <span>{{yun.fifthValueScore}}分</span></div>
          <div v-if="yun.fifthValueDescribe">
            <div class="exampletitle">评分举例说明</div>
            <div class="examplecontent">{{yun.fifthValueDescribe}}</div>
          </div>
          <div class="imglist" v-if="yun.fifthValueImg">
            <img v-for="item in yun.fifthValueImg" :src="item" alt="" @click="setbig(item)">
          </div>
        </div>
        <div v-if="parseInt(formdata.staffMemberEvaluationScore)===0 && isShow">暂无运营评价</div>

      </el-tab-pane>
      <el-tab-pane label="自评结果" name="second">

        <div v-if="(parseInt(formdata.selfEvaluationScore)===0 && isShow)">未评</div>
        <div v-if="(!isShow || parseInt(formdata.selfEvaluationScore)!= 0)">
          <div class="sorcont">自评总得分：  <span>{{ziping.totalScore}}分</span></div>
          <div style="margin-top: 30px"></div>
          <div class="sorcont">用户至上：  <span>{{ziping.firstValueScore}}分</span></div>
          <div v-if="ziping.firstValueDescribe">
            <div class="exampletitle">评分举例说明</div>
            <div class="examplecontent">{{ziping.firstValueDescribe}}</div>
          </div>
          <div class="imglist" v-if="ziping.firstValueImg">
            <img v-for="item in ziping.firstValueImg" :src="item" alt="" @click="setbig(item)">
<!--            <img v-for="item in JSON.parse(ziping.firstValueImg)" :src="item" alt="">-->
          </div>
          <div class="sorcont">正直坦诚：  <span>{{ziping.secondValueScore}}分</span></div>
          <div v-if="ziping.secondValueDescribe">
            <div class="exampletitle">评分举例说明</div>
            <div class="examplecontent">{{ziping.secondValueDescribe}}</div>
          </div>
          <div class="imglist" v-if="ziping.secondValueImg">
            <img v-for="item in ziping.secondValueImg" :src="item" alt="" @click="setbig(item)">
          </div>
          <div class="sorcont">极致执行：  <span>{{ziping.thirdValueScore}}分</span></div>
          <div v-if="ziping.thirdValueDescribe">
            <div class="exampletitle">评分举例说明</div>
            <div class="examplecontent">{{ziping.thirdValueDescribe}}</div>
          </div>
          <div class="imglist" v-if="ziping.thirdValueImg">
            <img v-for="item in ziping.thirdValueImg" :src="item" alt="" @click="setbig(item)">
          </div>
          <div class="sorcont">精进创新：  <span>{{ziping.fourthValueScore}}分</span></div>
          <div v-if="ziping.fourthValueDescribe">
            <div class="exampletitle">评分举例说明</div>
            <div class="examplecontent">{{ziping.fourthValueDescribe}}</div>
          </div>
          <div class="imglist" v-if="ziping.fourthValueImg">
            <img v-for="item in ziping.fourthValueImg" :src="item" alt="" @click="setbig(item)">
          </div>
          <div class="sorcont">团结共赢：  <span>{{ziping.fifthValueScore}}分</span></div>
          <div v-if="ziping.fifthValueDescribe">
            <div class="exampletitle">评分举例说明</div>
            <div class="examplecontent">{{ziping.fifthValueDescribe}}</div>
          </div>
          <div class="imglist" v-if="ziping.fifthValueImg">
            <img v-for="item in ziping.fifthValueImg" :src="item" alt="" @click="setbig(item)">
          </div>
        </div>

      </el-tab-pane>
      <el-tab-pane label="管家评价结果" name="third">
        <div v-if="guanjia">
          <div v-if="parseInt(formdata.superiorEvaluationScore) === 0 && isShow">未评</div>
          <div v-else>
          <div class="sorcont">管家头像：  <span><img style="width: 40px;height: 40px;border-radius: 4px" :src="guanjia.avatar" alt=""></span></div>
          <div class="sorcont">管家昵称：  <span style="color: #151515;">{{guanjia.nickname}}</span></div>
          <div class="sorcont">管家手机号：  <span style="color: #151515;">{{guanjia.phone}}</span></div>
          <div class="sorcont">管家评价总得分：  <span>{{guanjia.totalScore}}分</span></div>
          <div class="sorcont">用户至上：  <span>{{guanjia.firstValueScore}}分</span></div>
          <div v-if="guanjia.firstValueDescribe">
            <div class="exampletitle">评分举例说明</div>
            <div class="examplecontent">{{guanjia.firstValueDescribe}}</div>
          </div>
          <div class="imglist" v-if="guanjia.firstValueImg">
            <img v-for="item in guanjia.firstValueImg" :src="item" alt="" @click="setbig(item)">
          </div>
          <div class="sorcont">正直坦诚：  <span>{{guanjia.secondValueScore}}分</span></div>
          <div v-if="guanjia.secondValueDescribe">
            <div class="exampletitle">评分举例说明</div>
            <div class="examplecontent">{{guanjia.secondValueDescribe}}</div>
          </div>
          <div class="imglist" v-if="guanjia.secondValueImg">
            <img v-for="item in guanjia.secondValueImg" :src="item" alt="" @click="setbig(item)">
          </div>
          <div class="sorcont">极致执行：  <span>{{guanjia.thirdValueScore}}分</span></div>
          <div v-if="guanjia.thirdValueDescribe">
            <div class="exampletitle">评分举例说明</div>
            <div class="examplecontent">{{guanjia.thirdValueDescribe}}</div>
          </div>
          <div class="imglist" v-if="guanjia.thirdValueImg">
            <img v-for="item in guanjia.thirdValueImg" :src="item" alt="" @click="setbig(item)">
          </div>
          <div class="sorcont">精进创新：  <span>{{guanjia.fourthValueScore}}分</span></div>
          <div v-if="guanjia.fourthValueDescribe">
            <div class="exampletitle">评分举例说明</div>
            <div class="examplecontent">{{guanjia.fourthValueDescribe}}</div>
          </div>
          <div class="imglist" v-if="guanjia.fourthValueImg">
            <img v-for="item in guanjia.fourthValueImg" :src="item" alt="" @click="setbig(item)">
          </div>
          <div class="sorcont">团结共赢：  <span>{{guanjia.fifthValueScore}}分</span></div>
          <div v-if="guanjia.fifthValueDescribe">
            <div class="exampletitle">评分举例说明</div>
            <div class="examplecontent">{{guanjia.fifthValueDescribe}}</div>
          </div>
          <div class="imglist" v-if="guanjia.fifthValueImg">
            <img v-for="item in guanjia.fifthValueImg" :src="item" alt="" @click="setbig(item)">
          </div>
          </div>
        </div>
        <div v-else>暂无管家</div>
      </el-tab-pane>
      <el-tab-pane label="下级评价结果" name="fourth">

        <div v-if="xiaji.length===0">暂无下级评价</div>
        <div v-if="xiaji.length!=0">
          <div class="flexcont" v-for="item in xiaji">
            <div class="usercon">
              <div class="img"><img style="width: 40px;height: 40px;border-radius: 4px" :src="item.avatar" alt=""></div>
              <div>{{item.nickname}}</div>
              <div>{{item.phone}}</div>
              <div v-if="item.isComment===0" style="margin-top: 30px;margin-bottom: 30px"><span>未评价</span></div>
            </div>

            <div>
              <div class="sorcont">整体评分：  <span v-if="item.isComment!=0 || !isShow">{{item.wholeScore}}分</span></div>
              <div class="sorcont">评价评分：  <span v-if="item.isComment!=0 || !isShow">{{item.teachingScore}}分</span></div>
              <div class="sorcont">沟通情况评分：  <span v-if="item.isComment!=0 || !isShow">{{item.communicationScore}}分</span></div>
              <div v-if="item.evaluationSuperiorDescribe">
                <div class="exampletitle">评分举例说明</div>
                <div class="examplecontent">{{item.evaluationSuperiorDescribe}}</div>
              </div>
              <div class="imglist" v-if="item.evaluationSuperiorImg">
<!--                <img v-for="items in JSON.parse(item.evaluationSuperiorImg)" :src="items" alt="" @click="setbig(items)">-->
                <img v-for="items in item.evaluationSuperiorImg" :src="items" alt="" @click="setbig(items)">
              </div>
            </div>
          </div>
        </div>


        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="totalPage"
          layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>

      </el-tab-pane>
    </el-tabs>
    <bigimg :bigimgsrc="bigsrc" v-if="showbig" @hideimg="hidebig"></bigimg>
  </div>
</template>

<script>
    import bigimg from '@/components/bigimg/index'
  export default {
    name: "resultShow",
      components: {bigimg},
    data() {
      return {
          isShow: true, // 开发评价 true 已评价完fasle
        activeName: 'first',
        formdata: {},
        quarterTime: '',
        yun: {},
        ziping: {},
        guanjia: {},
        xiaji: [],
        valueId: 0,
        year: '',
        jidu: '',
          pageIndex: 1,
          pageSize: 10,
          totalPage: 0,
          showbig: false,
          bigsrc:"",
      };
    },
    methods: {
      init(data, quarterTime,isShow) {
        this.formdata = data
        this.quarterTime = quarterTime
        this.year = quarterTime.substring(0,4)
          this.isShow = isShow

        console.log(quarterTime.substring(4,7))
        if(quarterTime.substring(4,7)=='01'){
          this.jidu = '一'
          this.quarterTime = this.year+'.01 - '+this.year+'.03'
        }
        if(quarterTime.substring(4,7)=='04'){
          this.jidu = '二'
          this.quarterTime = this.year+'.04 - '+this.year+'.06'
        }
        if(quarterTime.substring(4,7)=='07'){
          this.jidu = '三'
          this.quarterTime = this.year+'.07 - '+this.year+'.09'
        }
        if(quarterTime.substring(4,7)=='10'){
          this.jidu = '四'
          this.quarterTime = this.year+'.10 - '+this.year+'.12'
        }
        this.initfour()
      },
      initfour() {

          // 3获取运营评价结果
        this.$http({
          url: this.$http.adornUrl("/value/valuecommentlog/getSelfOrStaffEvaluationResult"),
          method: "get",
          params: this.$http.adornParams({valueId: this.formdata.id, evaluationType: 3})
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.yun = data.result
          }
        });
        //  1获取自评结果
        this.$http({
          url: this.$http.adornUrl("/value/valuecommentlog/getSelfOrStaffEvaluationResult"),
          method: "get",
          params: this.$http.adornParams({valueId: this.formdata.id, evaluationType: 1})
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.ziping = data.result
          }
        });
        // 2获取管家评价结果
        this.$http({
          url: this.$http.adornUrl("/value/valuecommentlog/getSuperiorEvaluationResult"),
          method: "get",
          params: this.$http.adornParams({valueId: this.formdata.id, evaluationType: 2})
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.guanjia = data.result
          }
        });

          // 获取下级评价结果
        this.getDataList();

        // this.$http({
        //   url: this.$http.adornUrl("/value/stewardservicelog/getSubordinateEvaluationResult"),
        //   method: "get",
        //   params: this.$http.adornParams({valueId: this.formdata.id})
        // }).then(({data}) => {
        //   if (data && data.code === 0) {
        //     this.xiaji = data.page.list
        //     console.log(this.xiaji)
        //   }
        // });
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      back() {
        this.$emit('goback')
      },
        // 每页数
        sizeChangeHandle(val) {
            this.pageSize = val;
            this.pageIndex = 1;
            this.getDataList();
        },
        // 当前页
        currentChangeHandle(val) {
            this.pageIndex = val;
            this.getDataList();
        },
        // 获取下级评价结果
        getDataList(){

            let obj = {
                page: this.pageIndex,
                limit: this.pageSize,
                stewardServiceInfoId: this.formdata.stewardServiceInfoId
            };

            // 获取下级评价结果
            this.$http({
                url: this.$http.adornUrl("/value/stewardservicelog/getSubordinateEvaluationResult"),
                method: "get",
                params: this.$http.adornParams(obj)
            }).then(({data}) => {
                if (data && data.code === 0) {
                    this.xiaji = data.page.list
                    this.totalPage = data.page.totalCount;
                    console.log(this.xiaji)
                } else {
                    this.xiaji = [];
                    this.totalPage = 0;
                }
            });
        },

        setbig(imgUrl) {

            // this.bigsrc = 'http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIWlliaQwAmTODz9ec0tXFUicfhZP9qmJmot4vib7ZC3c9vmqXkSlL21sSHw8IcBLicrazZAGxXszr8FA/132'
            this.bigsrc = imgUrl
            this.showbig = true
        },
        hidebig() {
            this.showbig = false
        },

    }
  }
</script>

<style lang="scss" scoped>
  .flexcontent{
    display: flex;
    .title{
      color: #999;
      margin: 20px;
    }
    .source{
      display: flex;
    }
    .btnback{
      margin-top: 10px;
    }
    .sorcont{
      width: 200px;
      margin: 10px 20px;
      span{
        color: #409EFF;
      }
    }
  }
  .sorcont{
    width: 200px;
    margin: 10px 0px;
    span{
      color: #409EFF;
    }
  }
  .exampletitle{
    margin: 30px 0 15px 0;
  }
  .examplecontent{
    margin: 15px 0;
  }
  .imglist{
    display: flex;
    flex-wrap: wrap;
    img{
      width: 80px;
      height: 80px;
      margin-right: 20px;
      margin-bottom: 20px;
    }
  }
  .flexcont{
    padding: 20px 0;
    border-bottom: 1px solid #efefef;
    display: flex;
    .usercon{
      margin-right: 30px;
      text-align: center;
      div{
        margin-top: 10px;
      }
    }
  }
</style>
